<template>
  <div class="loginPage">
    <!-- 表单 -->
    <el-form ref="userform" :rules="rules" :model="form" class="myform">
      <!-- 放置标题图片 -->
      <div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="" />
        </h3>
      </div>
      <el-form-item prop="mobile">
        <el-input
          prefix-icon="el-icon-user-solid"
          v-model="form.mobile"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login" :loading="loading"
          >登陆</el-button
        >
      </el-form-item>
      <div class="bottomtext">还没有注册?赶紧去注册</div>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      // 表单数据
      form: {
        mobile: '13800000002',
        password: '123456'
      },
      // 对用户输入信息进行验证
      rules: {
        userss: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: function (ule, value, callback) {
              let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              reg.test(value)
                ? callback()
                : callback(new Error('手机号格式不正确'))
            }
          }
        ],
        passaa: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 长度 3~5
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      // 按钮的加载效果
      loading: false
    }
  },
  methods: {
    ...mapActions({
      // 对vuex中user.js中actions的login的方法取别名
      loginInfo: 'user/login'
    }),
    login () {
      this.$refs.userform.validate(async valid => {
        // 验证表单的代码
        if (valid) {
          this.loading = true
          try {
            await this.loginInfo(this.form)
            // 跳转到主界面.
            // 获取路径参数_redirect
            const _redirect = this.$route.query._redirect
            // 进行判断是否携带的又_redirect参数路径,是就跳转回原携带_redirect的路径页面
            if (_redirect) {
              this.$router.push(_redirect)
            } else {
              // 不是
              this.$router.push('/')
            }
            this.$message.success('欢迎回家')
          } catch (error) {
            console.log(error.message);
          } finally {
            // 取消 loading
            this.loading = false
          }
        } else {
          console.log('失败')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.loginPage {
  height: 100%;
  background-image: url('../../assets/common/login.jpg');
  background-position: center;
  .myform {
    $light_gray: #68b0fe;
    width: 520px;
    height: 400px;
    padding: 35px 35px 25px 35px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    input.el-input__inner {
      height: 50px;
      margin: 10px 0;
    }
    button.el-button.el-button--primary {
      width: 100%;
      background: #407ffe;
      font-size: 24px;
    }
    input.el-input__inner {
      background: rgba(255, 255, 255, 0.7);
      color: #407ffe;
    }
    .bottomtext {
      color: #fff;
      text-align: center;
    }
  }
}
</style>
